<template>
  <table id="all-requst">
    <thead>
    <tr>
      <th style="width: 10%">编号</th>
      <th style="width: 20%">分类名</th>
      <th style="width: 15%">别名</th>
      <th>分类描述</th>
      <th style="width: 12%" colspan="2">操作</th>
    </tr>
    </thead>
    <tbody>
    <div>
      <span class="msg">{{getMsg()}}</span>
      <Loading v-if="isload"/>
    </div>
    <tr>
      <td style="width: 10%"><input type="text" placeholder="编号" v-model="editor.categoryId" disabled></td>
      <td style="width: 20%"><input type="text" placeholder="名称" v-model="editor.categoryName"></td>
      <td style="width: 15%"><input type="text" placeholder="别名" v-model="editor.categoryAlias"></td>
      <td ><input type="text" placeholder="描述" v-model="editor.categoryDescribe"></td>
      <td style="width: 4%"><div class="action" @click="clear()">清空</div></td>
      <td style="width: 4%"><div class="action" @click="add(editor)">添加</div></td>
      <td style="width: 4%"><div class="action" @click="faupdate(editor)">修改</div></td>
    </tr>
    <tr v-for="(data,index) in dataList" :key="index">
      <td style="width: 10%">{{ data.categoryId }}</td>
      <td style="width: 20%">{{ data.categoryName }}</td>
      <td style="width: 15%">{{ data.categoryAlias }}</td>
      <td >{{ data.categoryDescribe }}</td>
      <td style="width: 6%"><div class="action" @click="deleteById(data)">删除</div></td>
      <td style="width: 6%"><div class="action" @click="sonupdate(data)">修改</div></td>
    </tr>
    </tbody>
  </table>
  <div class="page">
    <span>所有分类: {{ limitConfig.totalCount }}</span>
    <span>当前页数 {{ limitConfig.pageNo }} 页</span>
  </div>
  <LimitControl @receiveData="receiveData" :config="limitConfig" />
</template>

<script>
import {request} from "../../../axios";
import LimitControl from "../../common/LimitControl";
import Loading from "../../body/message/Loading";

export default {
  name: "CategoryTable",
  components:{
    LimitControl,Loading
  },
  data(){
    return {
      isload:true,
      msg:'',
      totalCount:0,
      dataList:[],
      editor: {
        categoryId:'',
        categoryName:'',
        categoryAlias:'',
        categoryDescribe:''
      },
      currequest:{
        addUrl:'/backend/addcategory',
        updateUrl:'/backend/updatecategory',
        deleteUrl:'/backend/deletecategory',
        countUrl: '/backend/allcategorycount',
      },
      limitConfig:{
        url:'/backend/categorylimit/',
        countUrl: '/backend/allcategorycount',
        pageSize:10,
        pageNo:0,
        totalCount:0,
        receiveData:'receiveData',
        isActivePre:true,
        isActiveNxet:true,
      },

    }
  },
  methods:{
    getMsg(){
      if(this.msg!=''){
        setTimeout(()=>{
          this.msg = '';
        },5000)
      }
      return this.msg;
    },
    clear(){
      this.isdisable=false;
      for (let editorKey in this.editor) {
        this.editor[editorKey]='';
      }
    },
    add(editor){
      if( !confirm("是否确认添加 ["+editor.categoryName+"] 分类？"))  {
        return;
      }
      this.isload = true;
      request({
        url: this.currequest.addUrl,
        method:'POST',
        data:{
          data:editor
        }
      }).then(res=>{
        this.flush(res.data.status);
      })
    },
    faupdate(data){
      if( !confirm("是否确认更新 ["+data.categoryName+"] ？"))  {
        return;
      }
      this.isload = true;
      request({
        url: this.currequest.updateUrl,
        method:'POST',
        data:{
          data:data
        }
      }).then(res=>{
        this.flush(res.data.status);
      })
    },
    sonupdate(data){
      this.isdisable=true;
      this.editor = JSON.parse(JSON.stringify(data));
    },
    deleteById(data){
      if( !confirm("是否确认删除 ["+data.categoryName+"] ？"))  {
        return;
      }
      this.isload = true;
      request({
        url: this.currequest.deleteUrl+`/${data.categoryId}`,
        method:"GET",
      }).then(res=>{
        this.flush(res.data.status)
      })
    },
    check(){
      var totalPage = Math.ceil(this.limitConfig.totalCount/this.limitConfig.pageSize);
      this.limitConfig.isActivePre = this.limitConfig.pageNo==1 ? false : true;
      this.limitConfig.isActiveNxet = this.limitConfig.pageNo >= totalPage  ? false : true;
    },
    preAndNextevent(config) {
      request({
        url: config.url+`/${config.pageNo}/${config.pageSize}`,
        method:'GET'
      }).then(res=>{
        this.dataList =  res.data.dataList;
        this.isload = false;
      }).catch(err=>{
      })
    },
    flush(flag){
      if(flag>=1){
        this.msg = '操作成功';
        this.preAndNextevent(this.limitConfig)
        this.getcount();
      }else{
        this.msg = '操作失败';
      }
    },
    receiveData(data){
      this.isload = false;
      this.dataList = data;
    },
    getcount(){
      request({
        url: this.currequest.countUrl,
        method:'GET',
      }).then(res=>{
        this.limitConfig.totalCount = res.data.count;
        this.check();
      })
    }
  }

}
</script>

<style scoped>
.msg{
  color: red;
  font-size: 1.2rem;
}
.page span{
  display: inline-block;
  background-color: #54BC4B;
  font-size: 1rem;
  margin: 0 1rem;
  padding: 0 .5rem;
  border-radius: 0.75rem;
}
table {
  margin-top: 30px;
  table-layout: fixed;
  word-break: break-all;
  word-wrap: break-word;
  font-family: STKaiti;
  border-collapse: collapse;
  border: 1px dashed white;
}

table tbody {
  display: block;
  min-height: 350px;
}
table thead,
tbody tr {
  display: table;
  width: 100%;
  table-layout: fixed;
}
table tr td:nth-child(9) {
  background-color:#1abc9c;
}
table tr:nth-child(even) {
  background-color: #FFFFFF;
}
table tr:nth-child(odd) {
  background-color: #E6E6FA;
}
table th:nth-child(even) {
  background-color: #DDDDDD;
}

table th:nth-child(odd) {
  background-color: #CCCCFF;
}
th {
  color: white;
  text-align: center;
  font-weight: lighter;
  letter-spacing: 2px;
  border-radius:5px;
}
tr, td {
  border: 1px dotted white;
  height: 30px;
  text-align: center;
}
.action{
  font-weight: bold;
  cursor: pointer;
}
.action:hover {
  transform: scale(1.1);
  text-decoration: underline #ffff00;
}
input{
  width: 100%;
  outline: none;
  border: 1px dotted #54BC4B;
  text-align: center;
}
input:focus{
  border-color: red;
}

</style>